<template>
  <div class="code-box">
    <div class="public-flex-box">
      <div class="public-code-icon" @click="lookCode1">
        <div class="public-title-bold">时间轴模板</div>
        <img :src="imgsrc1" alt="" />
      </div>
      <div class="cont-box" v-show="islook1">
        <timeline></timeline>
      </div>
    </div>

    <div class="public-flex-box">
      <div class="public-code-icon" @click="lookCode2">
        <div class="public-title-bold">时间轴模板代码展示</div>
        <img :src="imgsrc1" alt="" />
      </div>
      <div class="public-code-con" v-if="islook2">
        <v-md-preview :text="code" preview-class="vuepress-markdown-body"></v-md-preview>
      </div>
    </div>

  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import timeline from './components/timeline.vue'
import code from './code.md?raw'
const imgsrc1 = ref(
  "https://gw.alipayobjects.com/zos/antfincdn/Z5c7kzvi30/expand.svg"
);

let islook1 = ref(true);
const lookCode1 = () => {
  islook1.value = !islook1.value
}

let islook2 = ref(false);
const lookCode2 = () => {
  islook2.value = !islook2.value
}

</script>


<style lang="scss" scoped>
.code-box{
  width: 100%;
  height: 100%;
  overflow-y: auto;

}
</style>